<template>
    <div class="commovie">
        <div class="cover">
             <div class="left">最受好评电影</div>
            <div class="goods_files_list">
                <ul>
                    <li v-for="item in com_movies" :key="item.id">
                        <img :src="item.img" alt="">
                        <span class="set_con">
                            {{item.nm}}
                        </span>
                        <div class="score"> &nbsp;观众评分 &nbsp;&nbsp; <span>{{item.mk}}</span></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"ComMovie",
    data(){
        return {
            com_movies:[]
        }
    },
    mounted(){
        axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4")
        .then((res)=>{
            // console.log(res);
            // console.log(res.data.data);
            res.data.data.hot = res.data.data.hot.sort((a,b)=>{
               return  b.mk - a.mk
            })
            this.com_movies = res.data.data.hot.slice(0,10)
        })
    }
}
</script>

<style lang="less" scoped>
    .commovie{
        width: 100%;
        height: 4.2667rem;
        // background-color: aliceblue;
        margin: auto;
        // padding-left: .2667rem;
        // padding-right: .2667rem;
        padding-top: 2px;
        padding-bottom: 1.28rem;
        border-bottom: 10px solid rgb(242, 242, 242);
        background-color: #fff;
        .cover{
            width: 94%;
            margin: auto;
            margin-top: 12px;
        }
        .left{
            margin: .2667rem 0;
            text-align: left;
            font-size: .4267rem;
        }
        .goods_files_list{
            width: 100%;
            ul{
                text-decoration: none;
                display: flex;
                list-style: none;
                overflow: scroll;
                li{
                    width: 2.2667rem;
                    margin-right:.2667rem;
                    text-align: left;
                    position: relative;
                    img{
                        width: 2.2667rem;
                        height: 3.0667rem;
                    }
                    .set_con{
                        font-size: .3733rem;
                        font-weight: 600;
                        margin-top: .1333rem;
                        display: block;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .score{
                        position: absolute;
                        left: 0;
                        padding: .1333rem 0;
                        bottom: 19.2%;
                        font-weight: 600;
                        width:  2.2667rem;
                        color: rgb(250, 175, 0);
                        background-color: rgba(0,0,0,0.3);
                        // background:-webkit-liner-gradient( black, white )
                    }
                }
            }
        }
    }
</style>